<template>
	<div class="form-setting-group form-default-currency-setting">
		<h4 class="form-item-title">
			{{ $t('common.base.defaultCurrency') }}
			<el-tooltip v-show="showTip" :content="tooltipContent" placement="top">
				<i class="iconfont icon-question"></i>
			</el-tooltip>
		</h4>
		<div class="form-item-box">
			<el-select v-model="field.setting.defaultCurrency" @change="update">
				<el-option 
					v-for="item in currentOptions"
					:key="item.value"
					:label="item.label"
					:value="item.value">
				</el-option>
			</el-select>
		</div>
</div>
</template>

<script>
import { settingProps } from '@src/component/form/components/props';
import { currencyOption } from '@src/util/currency';
import locales, { t } from '@src/locales'

export default {
	name: 'form-default-currency-setting',
	props: {
		...settingProps,
		showTip: {
			type: Boolean,
			default: false
		},
		tooltipContent: {
			type: String,
			default: t('common.base.tip.showInInputAfterSet')
		},
	},
	data() {
		return {
			currentOptions: currencyOption || []
		}
	},
	methods: {
		update(value) {
			this.$emit('input', value, 'setting.defaultCurrency');
		}
	},
}
</script>

<style lang="scss" scoped>
.form-default-currency-setting {
	.form-item-title {
		margin-bottom: 0;
	}

	.form-item-box {
		.el-select {
			width: 100%;
			margin-top: 8px;
		}
	}
}
</style>